<template>
  <div class="log-display">
    <el-scrollbar @end-reached="endReached">
      <el-timeline>
        <el-timeline-item
          v-for="item in logList"
          :key="item.id"
          color="#eb5c20"
          :timestamp="item.createTime"
          placement="top"
        >
          <h4>{{ item.operateDesc }}-{{ item.userIp }}</h4>
          <div
            v-for="(content, index) in changeContent(item.changeContent)"
            :key="`${item.createTime}_${index}`"
            style="margin-top: 10px"
          >
            <span style="margin-right: 5px">{{ content.fieldDesc }}:</span>
            <span
              >{{ `[${content.oldValue || ""}]` }} ->
              {{ `[${content.newValue || ""}]` }}</span
            >
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as api from "@/api/index.js";
const props = defineProps({
  apiModel: {
    type: Function,
    default: ()=>{},
  },
  sourceNo: {
    type: String,
    default: "",
  },
});
const logList = ref([]);
const pageSize = ref(50);
const currentPage = ref(1);
onMounted(() => {
  list();
});
const endReached = (direction) => {
  if (direction == "top") return;
  currentPage.value++;
  list();
};
const list = () => {
  props.apiModel &&
    props
      .apiModel({
        sourceNo: props.sourceNo,
        currentPage: currentPage.value,
        pageSize: pageSize.value * currentPage.value,
      })
      .then((res) => {
        logList.value = res.rows;
      });
};
const changeContent = (content) => {
  return content ? JSON.parse(content) : [];
};
</script>

<style lang="scss" scoped>
.log-display {
  width: 100%;
  height: 100%;
  padding: 20px;
}
h4 {
 margin: 0;
}
</style>